<template>
  <div class="data-head">
    <div class="head-left">
      <date-view />
      <div class="line" />
      <div class="weather">
        <weather-view />
      </div>
    </div>
    <div class="head-mid">
      <div class="logo">
        <div class="title">
          {{ title }}
        </div>
      </div>
    </div>
    <div class="head-right">
      <div class="user">
        <div class="media">
          <div class="media-left">
            <span class="
                ivu-avatar ivu-avatar-circle ivu-avatar-default ivu-avatar-image
              ">
              <el-avatar :size="35" :src="userInfo.avatar | imgPath" @error="errorHandler">
                <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
              </el-avatar>
            </span>
          </div>
          <div class="media-body">
            <!--            <div class="title" />-->
            <div class="info" style="color: #fff">
              <el-dropdown>
                <span class="el-dropdown-link" style="height: 35px; line-height: 35px; color: #fff">
                  {{ userInfo.name
                  }}<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <router-link to="/tenancy">
                    <el-dropdown-item> 切换项目 </el-dropdown-item>
                  </router-link>
                  <router-link to="/profile/index">
                    <el-dropdown-item divided>
                      {{ $t("navbar.profile") }}
                    </el-dropdown-item>
                  </router-link>
                  <el-dropdown-item>
                    <span style="display: block" @click="updPwd">修改密码</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <span style="display: block" @click="logout">{{
                      $t("navbar.logOut")
                    }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <!--      <div class="set message">-->
      <!--&lt;!&ndash;        <i class="iconfont icon-xiaoxi" style="font-size: 16px;" />&ndash;&gt;-->
      <!--&lt;!&ndash;        <span class="ivu-badge"> 消息</span>&ndash;&gt;-->
      <!--      </div>-->
      <div class="set message" @click="gotoHome">
        <i class="icon-shezhi iconfont" style="font-size: 16px" />
        设置
      </div>
    </div>
    <el-dialog title="修改密码" width="30%" :visible.sync="dialogFormVisible" :modal="false" @closed="closeModel">
      <el-form ref="ruleForm" :model="object" :rules="rules" class="demo-ruleForm" label-width="120px" status-icon>
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model.trim="object.oldPassword"
            :onkeyup="object.oldPassword = object.oldPassword.replace(/\s+/g,'')" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model.trim="object.newPassword"
            :onkeyup="object.newPassword = object.newPassword.replace(/\s+/g,'')" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model.trim="object.checkPass" :onkeyup="object.checkPass = object.checkPass.replace(/\s+/g,'')"
            autocomplete="off" type="password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import WeatherView from "@/components/weather-view";
  import {
    updatePwd
  } from "@/api/user";
  import DateView from "@/components/date-view";
  import {
    removeSpaceId
  } from "@/utils/auth";
  import defaultSettings from "@/settings";
  import {
    imgPath
  } from "../../../../../filters";
  export default {
    name: "HeaderScreen",
    components: {
      DateView,
      WeatherView
    },

    props: {
      userInfo: Object,
      isChoose: {
        type: Boolean,
        default: false,
      },
      project: {
        type: Object,
      },
    },
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.object.newPassword) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        // title: defaultSettings.title,
        // logo: require('@/assets/img/' + defaultSettings.ent + '_logo1.png'),
        pro: {},
        dialogFormVisible: false,
        object: {
          oldPassword: "",
          newPassword: "",
          checkPass: "",
        },
        rules: {
          oldPassword: [{
            required: true,
            message: "请输入原密码",
            trigger: "blur"
          }, ],
          newPassword: [{
              required: true,
              message: "请输入新密码",
              trigger: "blur"
            },
            {
              min: 6,
              max: 20,
              message: "请输入6到20位的密码",
              trigger: "blur"
            },
          ],
          checkPass: [{
              required: true,
              message: "请输入确认密码",
              trigger: "blur"
            },
            {
              validator: validatePass2,
              trigger: "blur"
            },
          ],
        },
      };
    },
    computed: {
      user() {
        return this.$store.state.user;
      },
      enterprise() {
        return this.$store.state.enterprise.obj;
      },
      title() {
        if (this.project && this.project.name) {
          return this.project.name;
        } else if (this.enterprise && this.enterprise.name) {
          return this.enterprise.name;
        }
        return defaultSettings.title;
      },
      // logo() {
      //   if (this.enterprise && this.enterprise.picture) {
      //     return imgPath(this.enterprise.picture)
      //   }
      //   return require('@/assets/img/' + defaultSettings.ent + '_logo1.png')
      // }
    },
    mounted() {
      if (this.isChoose) {
        this.pro = this.project;
      }
    },
    methods: {
      closeModel() {
        this.$refs['ruleForm'].resetFields()
      },
      errorHandler() {
        return true;
      },
      gotoProjectManage(pro) {
        this.$store.commit("project/SET_SPACEID", pro.spaceId);
        window.location.reload();
      },
      gotoAdmin() {
        removeSpaceId();
        this.$store.commit("project/SET_SPACEID", "");
        this.$router.push({
          path: "/"
        });
      },
      gotoHome() {
        this.$router.push("/");
      },
      updPwd() {
        this.dialogFormVisible = true;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updatePwd(this.object.oldPassword, this.object.newPassword)
              .then((res) => {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.$refs[formName].resetFields();
                this.dialogFormVisible = false;
              })
              .catch((error) => {
                const data = error.response.data;
                for (const key in data) {
                  this.$message.error(this.$t(data[key]));
                }
              });
          } else {
            this.$message.error("校验失败");
            return false;
          }
        });
      },
      async logout() {
        await this.$store.dispatch("user/logout");
        this.$router.push(`/login?redirect=${this.$route.fullPath}`);
      },
    },
  };
</script>

<style lang="scss">
  .data-head {
    position: relative;
    padding: 0 20px;
    /* background: linear-gradient(#1D2528, #253237);*/
    background: #1d2528;
    border-bottom: 1px solid #394325;
    height: 60px;

    .head-left {
      float: left;
      width: 340px;
      color: #fff;

      .time {
        width: calc(50% - 1px);
        float: left;
        height: 100%;
        padding: 11px 10px 13px 0;

        .timenow {
          height: 28px;
          font-size: 24px;
          font-weight: 500;
          color: #ffffff;
          line-height: 28px;
          letter-spacing: 3px;
          text-align: right;
        }

        .date {
          height: 12px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          text-align: right;
        }
      }

      .weather {
        width: calc(50% - 11px);
        float: left;
        height: 100%;
      }

      .line {
        width: 1px;
        height: 41px;
        margin-top: 11px;
        background: #fff;
        float: left;
        margin-right: 10px;
      }
    }

    .head-mid {
      text-align: center;
      color: #fff;
      background: url(~@/assets/common/headtitle.png) no-repeat center;
      position: absolute;
      top: 60px;
      left: calc(50% - 326px);
      width: 652px;
      height: 53px;
      margin-top: -1px;
      z-index: 5;

      .logo {
        margin: -49px auto 0;

        img {
          //border-radius: 50%;
          width: 73px;
          height: 45px;
          display: inline-block;
          overflow: hidden;
          margin-bottom: 5px;
        }

        .title {
          margin: -5px auto 8px auto;
          //width: 288px;
          height: 28px;
          font-size: 22px;
          font-weight: 500;
          color: #ffffff;
          line-height: 28px;
          text-align: center;

          .el-dropdown {
            margin: -5px auto 8px auto;
            //width: 288px;
            height: 28px;
            font-size: 22px;
            font-weight: 500;
            color: #ffffff;
            line-height: 28px;
            text-align: center;
            max-width: 500px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }

    .head-right {
      float: right;
      width: 35%;
      color: #fff;
      z-index: 5;
      position: absolute;
      right: 20px;

      .set {
        float: right;
        margin-top: 20px;
        font-size: 14px;
        cursor: pointer;

        .demo-badge-message {
          background: #f5a623;
        }

        .ivu-badge-count {
          border: none !important;
          font-size: 10px;
          position: absolute;
          left: 18px;
          height: auto;
          top: -5px;
          line-height: 10px;
          box-shadow: none;
          padding: 2px 5px;
        }

        .ivu-icon {
          font-size: 20px;
          margin-right: 5px;
          vertical-align: middle;
        }
      }

      .message {
        margin: 20px 40px 0;
      }

      .user {
        float: right;
        margin-top: 5px;

        .media {
          padding-top: 10px !important;

          .media-body {
            display: block;
          }

          .title {
            height: 14px;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
            width: 72px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 2px;
          }

          .info .ivu-dropdown-rel a {
            color: #c0c0c0;
          }

          .ivu-avatar.ivu-avatar-icon {
            margin-top: 3px;
          }
        }
      }
    }
  }
</style>